<template>
    <div id="mobilePhoneNumberModification">
        <div>
            <van-config-provider :theme-vars="themeVars">
            <van-nav-bar
            title="手机号修改"
            left-arrow
            right-text="保存"
            @click-left="onClickLeft"
            @click-right="onClickRight"
            style="background-color: rgba(234, 233, 229);"
            />
            </van-config-provider>
        </div>
        <div style="margin-top:20px">
            <div class="van-hairline--bottom">
                    <van-field v-model="initialPN" label="原手机号" readonly center>
                        <template #button>
                        <van-button size="small" type="default" :text="bT" @click="sendVerificationCode"></van-button>
                        </template>
                    </van-field>
            </div>
            <div class="van-hairline--bottom">
                <van-field v-model="verificationCode" placeholder="请填写6位验证码" label="验证码" center></van-field>
            </div>
            <div class="van-hairline--bottom">
                <van-field v-model="newPN" label="新手机号" center></van-field>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import {ref,onBeforeMount,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
const route = useRoute();
const themeVars = {
    fontWeightBold:'bolder',
    navBarTitleFontSize:'20px',
}
let onClickLeft = ()=>{
    history.back()
}
let onClickRight = ()=>{
    if(verificationCode.value == 123456){
        if(newPN.value.length == 11){
            alert('修改成功')
            history.back();
        }else{
            alert('手机号格式不正确')
        }
    }else{
        alert('验证码错误')
    }
}
let total:any = ref({})
onMounted(() => {
    total.value = JSON.parse(route.query.data)
    initialPN.value = total.value.phoneNumber
})
let initialPN = ref()//原手机号
let verificationCode = ref()//验证码
let newPN = ref([])//新手机号
let bT:any = ref('发送验证码')//按钮文字
let sendVerificationCode = ()=>{    
    let num = ref(60)
    bT.value = num.value + 'S'
    let jsq = setInterval(()=>{
        num.value--
        bT.value = num.value + 'S'
        if(num.value == -1){
            clearInterval(jsq)
            bT.value = '发送验证码'
        }
    },1000)
}
</script>
<style scoped>
    
</style>